<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>动态列表</title>
		<style>
			/* 通配符选择器 */
			*{
				margin: 0;
				padding: 0;
			}
			/* 标签选择器 组合选择器 */
			#fruits > li{
				list-style: none;
				width: 280px;
				height: 40px;
				background-color: sandybrown;
				color: white;
				text-align: center;
				margin-top: 4px;
				font:18px/40px Arial;
				
			}
			body{
				background-color: #F5DEB3;
			}
			#fruits{
				margin: 20px auto;
			}
			#fruits >li >a{
				text-decoration: none;
				color:white;
				float: right;
				margin-right: 10px;
			}
			#mian{

				width: 50%;
				overflow: auto;
				margin: auto;
				position: absolute;
				top: 0; left: 0; bottom: 0; right: 0;
	
			}
			input{
				margin-top: 5px;
				height: 35px;
				width: 230px;
				border-radius: 4px;
				text-align: center;
				font: 15px/35px Arial;
				outline: none;
				border: none;
			}
			#okB{
				width: 50px;
				height: 30px;
				background-color: red;
				vertical-align: middle;
				border-radius: 4px;
				outline: none;
				border: none;
			}
		</style>
	</head>
	<body>
		<div id="mian">
			<ul id="fruits">
				<li v-for="fruit in fruits">{{fruit}}<a href="" @click.prevent="removeItem(fruit)" >╳</a></li>
			</ul>
			<input type="text" v-model="fruitName" @keyup.enter="addItem()"/>
			<button type="submit" id='okB' @click="addItem()">确认</button>
		</div>

	</body>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
	<script>
		let app = new Vue({
			el:'#mian',
			data:{
				fruits:['西瓜','苹果','葡萄','草莓'],
				fruitName:''
			},
			methods:{
				removeItem(fruit){
					let index = this.fruits.indexOf(fruit)
					this.fruits.splice(index,1)
				},
				addItem(){
					let name=this.fruitName.trim()
					this.fruits.push(name)
					this.fruitName=''
				}
			}
		})
	</script>
</html>
